<template>
  <el-input :disabled="true" v-model="userTypeLabel" />
</template>
<script>
import { useUserStore } from '@/store/modules/user';
export default {
  name: 'UserType',
  inheritAttrs: false,
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: String,
      default: ''
    },
    format: {
      type: String,
      default: ''
    }
  },
  data() {
    const userStore = useUserStore();
    return {
      userType: userStore.getUserInfo.userType,
      userList: [],
      userTypeObject: {}
    };
  },
  computed: {
    userTypeLabel() {
      const item = this.userList.find((item) => item.dictValue == this.userType);
      let label = '';
      if (item) {
        label = item.dictLabel;
      }
      return this.format.replaceAll('label', label || '').replaceAll('value', this.userType || '');
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.userTypeObject = this.modelValue;
        if (!newVal) {
          this.generateUserTypeObj();
        }
      },
      immediate: true,
      deep: true
    },
    userTypeObject: {
      handler(newVal, oldVal) {
        this.$emit('update:modelValue', newVal);
      },
      immediate: true,
      deep: true
    }
  },
  created() {},
  methods: {
    async generateUserTypeObj() {
      const res = await this.getDicts('code_user_type');
      this.userList = res.data;
      const item = this.userList.find((item) => item.dictValue == this.userType);
      let label = '';
      if (item) {
        label = item.dictLabel;
        label = this.format.replaceAll('label', label || '').replaceAll('value', this.userType || '');
      }
      this.userTypeObject = {
        label,
        value: this.userType
      };
    }
  }
};
</script>
